<!--
 * @name PageTitle
 * @description 组件描述
 * @author idouya
 * @email elegentfrog@163.com
 * @date 2025-07-01
 -->

<template>
  <div class="p-page-title">
    <img src="@/assets/img/scb/top-title.png" width="100%" height="168px" alt="" srcset="" />
    <div class="game-info">
      <div class="game-info-left" :style="event == 'PENTATHLON' ? 'font-size:1.8rem' : ''">
        <div class="game-discipline">
          {{ discipline }} <span v-if="eventName.length"> - {{ eventName }}</span>
          <!-- 2025年中国马术三项赛邀请赛暨第十五届全国运动会马术测试赛 <span v-if="eventName.length"> - {{ eventName }}</span> -->
        </div>
        <!-- <div class="game-discipline">十五运马术项目第二次综合联调</div> -->
        <div v-if="event != 'PENTATHLON'" class="game-event">
          <span v-if="match">{{ match }}</span>
          <span v-if="type.length && match.length"> - </span>
          <span v-if="type.length">{{ type }}</span>
        </div>
        <template v-else>
          <div class="game-event">{{ match }}</div>
          <div class="game-details">
            <div class="game-type">{{ type }}</div>
          </div>
        </template>
      </div>
      <div class="game-info-right">
        <!-- <div class="time" v-if="router?.currentRoute?.value?.name !== 'scb-cross-country-score'">
          {{ currentTime }}
        </div> -->
        <div
          class="time"
          v-if="(showTime && event.includes('DRES')) || showTime || matchType.includes('D')"
        >
          {{ currentTime }}
        </div>
        <img :src="getEventImg(event)" alt="" height="150px" />
      </div>
    </div>
  </div>
</template>

<script setup>
import Storage from '@/assets/js/storage'
import Utils from '@/assets/js/utils'
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'

dayjs.extend(utc)
dayjs.extend(timezone)

const props = defineProps({
  discipline: {
    type: String,
    default: '马术',
  },
  event: {
    type: String,
    default: '',
  },
  matchType: {
    type: String,
    default: '',
  },
  eventName: {
    type: String,
    default: '',
  },
  match: {
    type: String,
    default: '',
  },
  type: {
    type: String,
    default: '',
  },
  showTime: {
    type: Boolean,
    default: false,
  },
  // startTime: {
  //   type: String,
  //   default: '',
  // },
})

const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()
const currentTime = ref(getBeijingTime())
let timer = null

onUnmounted(() => {
  clearInterval(timer)
})
onMounted(() => {
  // 初始化显示一次
  currentTime.value = getBeijingTime()

  // 每分钟更新一次时间
  timer = setInterval(() => {
    currentTime.value = getBeijingTime()
  }, 100)
})

function getBeijingTime() {
  // 获取当前北京时间，格式为 HH:mm:ss
  return dayjs().tz('Asia/Shanghai').format('HH:mm:ss')
}

const getEventImg = (event) => {
  if (event.includes('DRES')) {
    return new URL('@/assets/img/scb/dressage.png', import.meta.url).href
  } else if (event.includes('EVEN')) {
    return new URL('@/assets/img/scb/eventing.png', import.meta.url).href
  } else if (event.includes('JUMP')) {
    return new URL('@/assets/img/scb/obstacle.png', import.meta.url).href
  } else {
    return new URL('@/assets/img/scb/obstacle.png', import.meta.url).href
  }
}
</script>

<style scoped lang="scss">
.p-page-title {
  position: relative;
  height: 168px;
  // background-image: url('@/assets/img/scb/top-title.png');
  // background-size: cover;
  // background-size: 100% 100%;

  .game-info {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    left: 22%;
    width: calc(100% - 22%);
    top: 0;
    height: 168px;
    color: #fff;
    font-size: 1.85rem;
    font-weight: 700;
    gap: 1.875rem;

    .game-info-left {
      font-size: 2.52rem;
      gap: 0.25rem;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-family: 'msyhbd';

      .game-discipline {
        font-size: 3rem;
      }

      .game-details {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .time {
          // font-size: 1.85rem;
          // font-size: 3rem;
          font-family: 'msyhbd';
        }
      }
    }

    .game-info-right {
      margin-right: 1.25rem;
      display: flex;
      font-size: 4rem;
      gap: 1.875rem;
      .time {
        display: flex;
        align-items: flex-end;
      }
    }
  }
}
</style>
